.slide-bar {
    display: flex;
    flex-direction: column;

    height: 100%;

    background: #f5f7f9;
    border-right: 1px solid #eaecf0;
    width: 260px;

    overflow-x: hidden;
    overflow-y: auto;

    .slide-bar-content {
        padding: 0 15px;

        &-header {
            padding-top: var(--padding-lg);
            display: flex;
            justify-content: center;

            a {
                width: 212px;
                padding: var(--padding-xs) 0;
                font-size: var(--font-size-sm);
                background: rgb(var(--bg-color-secondary));
                text-align: center;
                border: 1px solid rgb(var(--border-color));
                border-radius: var(--border-radius-base);
                display: block;
                transition: all 0.25s;
                cursor: pointer;

                &:hover {
                    background: rgb(var(--bg-color-hover));
                }
            }
        }

        .slide-bar-item {
            display: flex;
            margin: var(--margin-base) 0;

            span {
                width: 15px;
                font-size: 12px;
            }

            .slide-bar-box {
                position: relative;

                width: 212px;
                height: 120px;
                margin-left: 5px;

                background: #fff;
                border: 2px solid #c0c0c0;

                &:hover {
                    border: 2px solid #d66a2b;
                }
            }

            &-active {
                span {
                    color: #d66a2b;
                }

                .slide-bar-box {
                    border: 2px solid #d66a2b;
                }
            }
        }
    }

    .slide-add-button {
        padding: 10px 0;
        text-align: center;

        button {
            width: 45px;
            height: auto;

            font-size: 24px;
            line-height: 1;

            border-radius: 10px;
        }
    }
}
